<template>
  <div>
    <slot
      name="input"
      :show-picker="showPicker"
      @click="showPicker"
    />
    <van-popup
      v-model="picker.show"
      position="bottom"
      get-container="body"
      :style="{ height: '45%' }"
    >
      <div class="content">
        <div class="confirmBox">
          <div
            style="margin-left: 20px;"
            @click="concel()"
          >
            取消
          </div>
          <div
            style="margin-right: 20px;"
            @click="closeConfirm"
          >
            确定
          </div>
        </div>
        <div
          class="clearfix"
          style="text-align:center;padding:0"
        >
          <button
            class="btnLeft"
            type="button"
            aria-label="前一年"
            @click="prev"
          >
            <van-icon name="arrow-left" />
          </button>
          <span
            role="button"
            class="el-date-picker__header-label"
          >{{ year }}年</span>
          <button
            class="btnRight"
            type="button"
            aria-label="后一年"
            @click="next"
          >
            <van-icon name="arrow" />
          </button>
        </div>
        <div class="selectBox">
          <div class="oneRow">
            <span
              class="selectSeason"
              @click="selectSeason(1)"
            >第一季度</span> <span
              class="selectSeasonTwo"
              @click="selectSeason(2)"
            >第二季度</span>
          </div>
          <div class="twoRow">
            <span
              class="selectSeason"
              @click="selectSeason(3)"
            >第三季度</span> <span
              class="selectSeasonTwo"
              @click="selectSeason(4)"
            >第四季度</span>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: 'CommonPicker',
  props: {
    label: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    columns: {
      type: Array,
      default () {
        return []
      }
    },
    pickerTitle: {
      type: String,
      default: ''
    },
    rules: {
      type: Array,
      default () {
        return []
      }
    },
    // 多选时columns结构参考 https://vant-contrib.gitee.io/vant/v2/#/zh-CN/tree-select#item-shu-ju-jie-gou
    multiple: {
      type: Boolean,
      default: false
    },
    max: {
      type: Number,
      default: 100
    },
    // labelKey valueKey 在多选时不支持，统一文字text，值id
    labelKey: {
      type: String,
      default: 'label'
    },
    valueKey: {
      type: String,
      default: 'value'
    },
    required: {
      type: Boolean,
      default: false
    },
    // 多选时选择项结果是否加上父级的文字 (childText, childText) (parentText/childText, parentText/childText)
    showParentText: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      picker: {
        show: false
      },
      treeSelect: {
        value: []
      },
      year: new Date().getFullYear(),
      season: '',
      showValue: ''
    }
  },
  watch: {
    'picker.show': {
      handler (newVal) {
        if (this.multiple) {
          if (newVal) {
            this.treeSelect.value = [...this.value]
          } else {
            this.$emit('input', this.treeSelect.value)
          }
        }
      },
      immediate: true
    }
  },
  computed: {
    valueText () {
      if (this.multiple) {
        const r = []
        const b = new Map()
        this.columns.forEach(col => {
          if (col.children) {
            col.children.forEach(child => {
              const value = this.value.find(o => o === child.id)
              if (!b.has(child.id) && value) {
                b.set(child.id, '')
                r.push(this.multipleTextFormatter(child, col))
              }
            })
          }
        })
        return r.join(',')
      } else {
        const option = this.columns.find(item => item[this.valueKey] === this.value)
        if (option) {
          return option[this.labelKey]
        } else {
          switch (typeof this.value) {
            case 'string':
              return this.value
            case 'undefined':
              return ''
            case 'object':
              return ''
              // return JSON.stringify(this.value)
            default:
              return String(this.value)
          }
        }
      }
    }
  },
  methods: {
    onConfirm (value, index) {
      const diff = value[this.valueKey] !== this.value
      this.$emit('input', value[this.valueKey])
      this.$emit('confirm', value, index)
      if (diff) {
        this.$emit('change', value, index)
      }
      this.picker.show = false
    },
    onCancel () {
      this.picker.show = false
    },
    onChange () {

    },
    showPicker () {
      if (!this.disabled) {
        this.picker.show = true
      }
    },
    multipleTextFormatter (child, parent) {
      return this.showParentText ? `${parent.text}/${child.text}` : child.text
    },
    prev() {
      this.year = this.year * 1 - 1
    },
    next() {
      this.year = this.year * 1 + 1
    },
    selectSeason(val) {
      if (val === 1) {
        this.season = '一'
      } else if (val === 2) {
        this.season = '二'
      } else if (val === 3) {
        this.season = '三'
      } else if (val === 4) {
        this.season = '四'
      }
      this.showValue = `${this.year}年${this.season}季度`
      this.$emit('listenToQuarter', this.showValue)
      this.picker.show = false
    },
    concel() {
      this.picker.show = false
    },
    closeConfirm() {
      this.picker.show = false
    }
  },
  filters: {
    optionFilter (value, columns) {
      const option = columns.find(item => item.value === value)
      if (option) {
        return option[this.labelKey]
      } else {
        return value
      }
    }
  }
}
</script>

<style scoped>
.confirmBox{
  display: flex;
  justify-content: space-between;
  margin-top: 20px ;
  font-size: 30px;
  width: 100%;
}
  .clearfix{
font-size: 40px;
margin-top: 100px;
}
.btnLeft{
  margin-right: 30px;
}
.btnRight{
  margin-left: 30px;
}
.selectSeason{
  height: 60px;
  width: 100px;
  font-size: 40px;
  margin-right: 60px;
}
.selectSeason:hover{
   color:rgb(117, 171, 228)
}
.selectSeasonTwo:hover{
   color:rgb(117, 171, 228)
}
.oneRow{
  margin-top: 40px;

}
.twoRow{
  margin-top: 40px;
}
.selectSeasonTwo{
  font-size: 40px;
  width: 100px;
}
.selectBox{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}
</style>
